<!--
 * SelectTable 下拉表格组件
 * @author: Goal
 * @since: 2023-11-13
 * SelectTable.vue
-->
<template>
  <div style="display: flex; justify-content: center">
    <SelectTable
      v-model:data="data"
      :fields="fields"
      :tableData="tableData"
      :label="label"
      :objKey="objKey"
      :border="true"
      :curPage="1"
      :pageSize="10"
      :total="100"
      clearable
      editable
      @currentChange="currentChange"
      @inputChange="inputChange"
    ></SelectTable>
    <el-button @click="test">测试</el-button>
  </div>
</template>

<script setup lang="ts">
import SelectTable from "./components/SelectTable.vue";
import { ref, onMounted } from "vue";

// const data = ref({
//   id: "1002",
//   name: "李四",
//   address: "No. 189, Grove St, Los Angeles",
// });
const data = ref();

const objKey = ref("id");
const value = ref("id");
const label = ref("name");

onMounted(() => {
  data.value = {
    id: "1002",
    name: "李四",
    address: "No. 189, Grove St, Los Angeles",
  };
});

const test = () => {
  console.log(data.value);
};

const fields = [
  {
    prop: "id",
    label: "ID",
    width: 180,
  },
  {
    prop: "name",
    label: "姓名",
    width: 180,
  },
  {
    prop: "address",
    label: "地址",
    width: 200,
    showTooltip: true,
  },
];

const tableData = ref([
  {
    id: "1001",
    name: "张三",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "1002",
    name: "李四",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "1003",
    name: "王五",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "1004",
    name: "赵六",
    address: "No. 189, Grove St, Los Angeles",
  },
]);

const currentChange = (val: number) => {
  console.log(val);
};

const inputChange = (val: string) => {
  console.log(val);
};
</script>

<style scoped></style>
